<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>北京国庆出游规划助手</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <style>
        body {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
        }
        .card {
            transition: transform 0.3s;
            border: none;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }
        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 15px rgba(0,0,0,0.2);
        }
        .hero-section {
            background: rgba(255,255,255,0.1);
            backdrop-filter: blur(10px);
            border-radius: 15px;
            margin: 20px 0;
            padding: 40px;
        }
        .attraction-card {
            margin-bottom: 20px;
        }
        .timeline {
            position: relative;
            padding-left: 30px;
        }
        .timeline::before {
            content: '';
            position: absolute;
            left: 15px;
            top: 0;
            bottom: 0;
            width: 2px;
            background: #007bff;
        }
        .timeline-item {
            position: relative;
            margin-bottom: 20px;
            padding-left: 30px;
        }
        .timeline-item::before {
            content: '';
            position: absolute;
            left: -23px;
            top: 8px;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: #007bff;
        }
    </style>
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container">
            <a class="navbar-brand" href="#">
                <i class="fas fa-map-marked-alt"></i> 北京国庆出游规划助手
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="#attractions">热门景点</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#planner">路线规划</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <div class="container-fluid">
        <div class="hero-section text-center text-white">
            <h1 class="display-4 mb-4">
                <i class="fas fa-landmark"></i> 北京国庆出游规划助手
            </h1>
            <p class="lead mb-4">智能规划您的北京之旅，让国庆假期更精彩！</p>
            <div class="row justify-content-center">
                <div class="col-md-8">
                    <div class="row text-center">
                        <div class="col-md-3">
                            <i class="fas fa-map-marked-alt fa-3x mb-2"></i>
                            <h5>智能路线</h5>
                        </div>
                        <div class="col-md-3">
                            <i class="fas fa-clock fa-3x mb-2"></i>
                            <h5>时间优化</h5>
                        </div>
                        <div class="col-md-3">
                            <i class="fas fa-calculator fa-3x mb-2"></i>
                            <h5>费用估算</h5>
                        </div>
                        <div class="col-md-3">
                            <i class="fas fa-subway fa-3x mb-2"></i>
                            <h5>交通建议</h5>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="container">
            <section id="attractions" class="mb-5">
                <h2 class="text-center mb-4 text-white">
                    <i class="fas fa-star"></i> 北京十大热门景点
                </h2>
                <div class="row" id="attractions-container">
                    <!-- 景点卡片将通过JavaScript动态加载 -->
                </div>
            </section>

            <section id="planner" class="mb-5">
                <h2 class="text-center mb-4 text-white">
                    <i class="fas fa-route"></i> 智能路线规划
                </h2>
                <div class="row justify-content-center">
                    <div class="col-md-8">
                        <div class="card">
                            <div class="card-body">
                                <form id="planning-form">
                                    <div class="mb-3">
                                        <label class="form-label">出发地点</label>
                                        <input type="text" class="form-control" id="start-location" 
                                               placeholder="例如：北京西站" required>
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label">游玩天数</label>
                                        <select class="form-select" id="days" required>
                                            <option value="">请选择天数</option>
                                            <option value="1">1天</option>
                                            <option value="2">2天</option>
                                            <option value="3">3天</option>
                                            <option value="4">4天</option>
                                            <option value="5">5天</option>
                                        </select>
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label">偏好类型</label>
                                        <select class="form-select" id="preference" required>
                                            <option value="">请选择偏好</option>
                                            <option value="文化古迹">文化古迹</option>
                                            <option value="现代都市">现代都市</option>
                                            <option value="自然风光">自然风光</option>
                                            <option value="全部">全部景点</option>
                                        </select>
                                    </div>
                                    <button type="submit" class="btn btn-primary w-100">
                                        <i class="fas fa-magic"></i> 生成路线规划
                                    </button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <section id="results" class="mb-5" style="display: none;">
                <h2 class="text-center mb-4 text-white">
                    <i class="fas fa-list-alt"></i> 推荐路线方案
                </h2>
                <div id="plans-container">
                    <!-- 路线方案将通过JavaScript动态加载 -->
                </div>
            </section>
        </div>
    </div>

    <footer class="bg-dark text-white text-center py-4">
        <div class="container">
            <p>&copy; 2024 北京国庆出游规划助手 | 让旅行更简单</p>
        </div>
    </footer>

    <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
    <script>
        // 加载景点数据
        function loadAttractions() {
            const attractions = [
                {id: 1, name: "故宫博物院", description: "明清两代的皇家宫殿，世界文化遗产", ticket_price: 60, recommended_duration: 4, crowd_level: "高"},
                {id: 2, name: "天安门广场", description: "世界最大的城市广场之一，观看升旗仪式", ticket_price: 0, recommended_duration: 2, crowd_level: "高"},
                {id: 3, name: "颐和园", description: "清朝皇家园林，世界文化遗产", ticket_price: 30, recommended_duration: 4, crowd_level: "中"},
                {id: 4, name: "长城-八达岭段", description: "世界文化遗产，中国古代军事防御工程", ticket_price: 40, recommended_duration: 4, crowd_level: "高"},
                {id: 5, name: "天坛公园", description: "明清皇帝祭天场所，世界文化遗产", ticket_price: 15, recommended_duration: 3, crowd_level: "中"},
                {id: 6, name: "圆明园遗址公园", description: "清代大型皇家园林遗址", ticket_price: 10, recommended_duration: 3, crowd_level: "中"},
                {id: 7, name: "北海公园", description: "中国现存最古老的皇家园林", ticket_price: 10, recommended_duration: 2, crowd_level: "中"},
                {id: 8, name: "798艺术区", description: "现代艺术文化聚集地", ticket_price: 0, recommended_duration: 3, crowd_level: "低"},
                {id: 9, name: "奥林匹克公园", description: "2008年北京奥运会主场馆所在地", ticket_price: 0, recommended_duration: 2, crowd_level: "中"},
                {id: 10, name: "南锣鼓巷", description: "老北京胡同文化体验区", ticket_price: 0, recommended_duration: 2, crowd_level: "高"}
            ];

            const container = document.getElementById('attractions-container');
            attractions.forEach(attraction => {
                const card = `
                    <div class="col-md-4 col-lg-3 mb-4">
                        <div class="card attraction-card">
                            <div class="card-body">
                                <h5 class="card-title">${attraction.name}</h5>
                                <p class="card-text">${attraction.description}</p>
                                <div class="d-flex justify-content-between align-items-center">
                                    <span class="badge bg-primary">¥${attraction.ticket_price}</span>
                                    <span class="badge bg-info">${attraction.recommended_duration}小时</span>
                                    <span class="badge ${attraction.crowd_level === '高' ? 'bg-danger' : attraction.crowd_level === '中' ? 'bg-warning' : 'bg-success'}">
                                        ${attraction.crowd_level}
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                `;
                container.innerHTML += card;
            });
        }

        // 处理表单提交
        document.getElementById('planning-form').addEventListener('submit', function(e) {
            e.preventDefault();
            
            const startLocation = document.getElementById('start-location').value;
            const days = parseInt(document.getElementById('days').value);
            const preference = document.getElementById('preference').value;

            // 模拟API响应
            const mockPlans = generateMockPlans(startLocation, days, preference);
            displayPlans(mockPlans);
        });

        // 生成模拟路线方案
        function generateMockPlans(startLocation, days, preference) {
            const plans = [];
            
            for (let i = 1; i <= 3; i++) {
                const attractions = [];
                const dailyAttractions = Math.ceil(8 / 3); // 每天8小时，每个景点约3小时
                
                for (let j = 0; j < days * dailyAttractions; j++) {
                    const attractionId = (j % 10) + 1;
                    attractions.push({
                        id: attractionId,
                        name: ["故宫", "天安门", "颐和园", "长城", "天坛", "圆明园", "北海", "798", "奥林匹克", "南锣鼓巷"][(attractionId - 1) % 10],
                        description: "这是一个精彩的景点",
                        ticket_price: [60, 0, 30, 40, 15, 10, 10, 0, 0, 0][(attractionId - 1) % 10],
                        recommended_duration: 3
                    });
                }
                
                plans.push({
                    plan_id: i,
                    total_duration: days * 8,
                    total_cost: attractions.reduce((sum, a) => sum + a.ticket_price, 0),
                    transport_suggestion: "建议使用地铁+公交组合，高峰期可考虑网约车",
                    attractions: attractions
                });
            }
            
            return plans;
        }

        // 显示路线方案
        function displayPlans(plans) {
            const container = document.getElementById('plans-container');
            const resultsSection = document.getElementById('results');
            
            container.innerHTML = '';
            
            plans.forEach(plan => {
                const planCard = `
                    <div class="card mb-4">
                        <div class="card-header bg-primary text-white">
                            <h5 class="mb-0">
                                <i class="fas fa-route"></i> 方案 ${plan.plan_id}
                                <span class="float-end">
                                    总费用: ¥${plan.total_cost} | 总时长: ${plan.total_duration}小时
                                </span>
                            </h5>
                        </div>
                        <div class="card-body">
                            <p><strong>交通建议:</strong> ${plan.transport_suggestion}</p>
                            
                            <h6 class="mt-3">行程安排:</h6>
                            <div class="timeline">
                                ${plan.attractions.map((attraction, index) => `
                                    <div class="timeline-item">
                                        <h6>${attraction.name}</h6>
                                        <p class="mb-1">${attraction.description}</p>
                                        <small class="text-muted">
                                            <i class="fas fa-clock"></i> ${attraction.recommended_duration}小时 | 
                                            <i class="fas fa-ticket-alt"></i> ¥${attraction.ticket_price}
                                        </small>
                                    </div>
                                `).join('')}
                            </div>
                        </div>
                    </div>
                `;
                container.innerHTML += planCard;
            });
            
            resultsSection.style.display = 'block';
            resultsSection.scrollIntoView({ behavior: 'smooth' });
        }

        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            loadAttractions();
        });
    </script>
</body>
</html>
